<template>
	<div class="hello">
		<div class="clearfix group" >
			<img src="../../../assets/u4219.png" alt="" class="left" />
			<div class="left addgroups" @click="addgroup">添加分组</div>
		</div>
		<!--<div class="line"></div>-->
		<div class="clearfix group_item">
			<img src="../../../assets/u4207.png" @click="del" alt="" class="left" />
			<div class="left groups_name">1段选手</div>
		</div>
		<div class="clearfix group_item">
			<img src="../../../assets/u4207.png" alt="" class="left" />
			<div class="left groups_name">北京</div>
		</div>
		<div class="clearfix group_item">
			<img src="../../../assets/u4207.png" alt="" class="left" />
			<div class="left groups_name">5段选手</div>
		</div>
	</div>
</template>

<script>
	import { MessageBox } from 'mint-ui';
	
	export default{
		methods:{
			addgroup:function(){				
//				MessageBox.prompt = function(message, title, options) {
//				  if (typeof title === 'object') {
//				    options = title;
//				    title = '';
//				  }
//				  return MessageBox(merge({
//				    title: title,
//				    message: message,
//				    showCancelButton: true,
//				    showInput: true,
//				    $type: 'prompt'
//				  }, options));
//				};
				MessageBox.prompt(' ', '请输入姓名', {inputPlaceholder: ''}).then(({ value, action }) =>{
  					console.log(value)
  					
				}).catch(err =>{
					return false
				})
			},
			del:function() {
				 MessageBox.confirm('', { 
					 message: '您确定要删除吗？', 
					 title: '提示', 
					 confirmButtonText: '确定', 
					 cancelButtonText: '取消' 
				 }).then(action => { 
					 if (action == 'confirm') {     
					 	console.log(1); 
					 }
				 }).catch(err => { 
					 if (err == 'cancel') {     
					 	console.log(2);
					 } 
				 });
			}
		}
	}
</script>

<style>
	body{
		margin:0px;
		padding: 0px;
	}
.clearfix:after{
	clear: both;
	content:'' ;
	display: block;	
}
.left{
	float:left
}
.right{
	float:right
}
.group,.group_item{
	line-height: 0.6rem;
	padding: 20px ;
}
.group{
	border-bottom: 2px solid #ccc;
}
.group_item{
	padding: 10px 0;
	margin-left: 20px;
	border-bottom: 1px solid #ccc;
}
.group>img,.group_item>img{
	display: block;
	height: 0.6rem;
}
.addgroups,.groups_name{
	font-size: 0.4rem;
	margin-left: 20px;
	color: #0000FF;
}
.groups_name{
	color: #000000;
}
</style>